<template>
    <div class="not-found">
      <h2>404</h2>
      <p class="slogan">人在旅途，难免迷茫，好在有你！</p>
      <span class="back" @click="backHome">返回首页</span>
    </div>
</template>

<script>
export default {
  name: 'notFound',
  methods: {
    backHome () {
      this.$router.push({path: '/'})
    }
  }
}
</script>

<style scoped>
.not-found{
  padding-top: 50px;
  color: #fff;
  background: #0199cb;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}
  .not-found h2{
    font-size: 5rem;
  }
  .slogan{
    font-size: 1.2rem;
  }
  .back{
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #48bdf3;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
